<template>
  <div class="person_content">
    <div class="person_header box">
      <div class="header_info">
        <div class="info_img "><img :src="$store.state.userInfo.avatar" alt="头像"></div>
        <div class="info_menu ">
          <h2><p class="dj fl box">{{$store.state.userInfo.gradeTitle}}</p></h2>
          <p class="info_id">ID：{{$store.state.userInfo.id}}<i></i></p>
        </div>
        <div class="info_shezhi" @click="preview">
          <vue-qr :callback="makeQr" :text="qrUrl" :size="200" :margin="10" :logoScale="0.2"></vue-qr>
        </div>
      </div>
    </div>
    <div style="font-size: 0.32rem;color: #fbe7d5;padding: 0px 0.3rem;">
      <div style="width: 80%;margin: auto;text-align: center;">
        <div style="width: 2rem;margin: -1.1rem 0rem .5rem -.3rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
          {{$store.state.userInfo.nickname}}
        </div>
      </div>
    </div>
    <div style="font-size: 0.22rem;color: rgb(251, 231, 213);padding: 0 .3rem;">
        <div style="width: 80%;margin: auto;text-align: center;">
          <div style="width: 1.4rem;margin: -.95rem 0 0.5rem auto;">
              我的分享码
          </div>
        </div>
    </div>
    <div class="person_midel">
      <div class="midel_top"></div>
      <div class="midel_title">会员权益</div>
      <ul>
        <li @click="goGold">
          <p class="num">{{$store.state.userInfo.gold}}</p>
          <p><span class="iconfont" >&#xe903;</span></p>
          <p>余额</p>
        </li>
        <li @click="goTxian" class="mm">
          <p class="num">{{$store.state.userInfo.gold}}</p>
          <p><span class="iconfont" >&#xe902;</span></p>
          <p>提现</p>
        </li>
        <li @click="goJgz">
          <p class="num">{{$store.state.userInfo.jgz}}</p>
          <p><span class="iconfont" >&#xe900;</span></p>
          <p>{{$store.state.userInfo.awardName}}</p>
        </li>
        <li @click="bdIndex">
          <p class="num">{{$store.state.userInfo.bd_index}}</p>
          <p><span class="iconfont" >&#xe900;</span></p>
          <p>{{$store.state.userInfo.bdAwardName}}</p>
        </li>
      </ul>
      <div class="midel_bottom">—— 天天爆单 颠覆传统的创富平台 ——</div>
    </div>

    <div  class="person_block_swiper box" v-if="swiperList.length > 0">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item  v-for = "item of swiperList" :key = "item.id">
            <img class="swiper-img" :src= "item.cover" style="width: 100%;border-radius: 4px;" @click="goBanner(item.url)"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-notice-bar
      left-icon="volume-o"
      text="会员积分累计达到8888可升级VIP会员!"
      color="#f7f8f7" background="#f5ae6b"
      style="height: 20px;"
    />
    <div class="person_block box">
      <div class="person_block_title box">
        订单管理
        <span class="fr" @click="goOrder('all')">查看全部订单  </span>
      </div>
      <ul class="person_block_ul">
        <li @click="goOrder(2)" style="position: relative;">
          <span class="iconfont" >&#xe775;</span>
          <span style="
            position: absolute;
            top: -5px;
            right: .4rem;
            border-radius: 16px;
            font-size: 12px;
            line-height: 16px;
            color: rgb(255, 255, 255);
            background: rgb(206, 36, 36);
            margin-left: 5px;
            width: 15px;
            height: 15px;
            line-height: 16px;
            " v-if="$store.state.userInfo.wait_pay_order === 1">1</span>
          <p>待付款</p>
        </li>
        <li  @click="goOrder(3)" style="position: relative;">
          <span class="iconfont">&#xe776;</span>
          <span style="
            position: absolute;
            top: -5px;
            right: .4rem;
            border-radius: 16px;
            font-size: 12px;
            line-height: 16px;
            color: rgb(255, 255, 255);
            background: rgb(206, 36, 36);
            margin-left: 5px;
            width: 15px;
            height: 15px;
            line-height: 16px;
            " v-if="$store.state.userInfo.wait_send_order > 0">{{$store.state.userInfo.wait_send_order}}</span>
          <p>待发货</p>
        </li>
        <li @click="goOrder(4)">
          <span class="iconfont">&#xe78d;</span>
          <p>待收货</p>
        </li>
        <li @click="goOrder('all')">
          <span class="iconfont">&#xe74a;</span>
          <p>待评价</p>
        </li>

      </ul>

    </div>

    <div class="person_block box">
      <div class="person_block_title box">
        会员管理
        <span class="person_tel">咨询热线:010-58701596</span>
      </div>

      <div class="person_block_content">
          <div class="person_share">
              <ul>
                <li @click="service('share')">
                    <p class="share_png" style="width:.8rem;margin: 0 auto .2rem;">
                      <img src="../../assets/img/share.png" width="100%">
                    </p>
                    <span>分</span>
                    <span style="margin-left: .1rem;">享</span>
                  </li>
              </ul>
          </div>
          <ul class="person_manage_ul">
            <li class="ul_li" @click = "goJf">
              <p>{{$store.state.userInfo.jf}}</p>
              <span>会员积分</span>
            </li>
            <li class="ul_li" @click="service('recommend')">
              <p><span class="pid_png" style="width: .35rem;">
                <img src="../../assets/img/pid.png" width="100%"></span></p>
              <span>推荐人</span>

            </li>
            <li class="ul_li">
              <p>{{fansData.all}}</p>
              <span>会员总数</span>

            </li><li class="ul_li" @click="toFansDetail">
              <p>{{fansData.direct}}</p>
              <span>直推会员数量</span>

            </li>

          </ul>
      </div>

    </div>
    <div class="person_block box">
      <div class="person_block_title box">
        服务中心
      </div>
      <ul class="person_block_ul_wake">
        <li v-for="(item,index) in myService" :key="index" @click="service(item.type)" v-if="item.isShow">
          <span class="iconfont">{{item.icon}}</span>
          <p>{{item.tit}}</p>
        </li>
      </ul>
    </div>
    <div class="van-list__finished-text" style="line-height: 20px;color: #fbe9e6;"></div>
    <jm-footer ref="footer"></jm-footer>

    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="selectShare"
    />

    <van-popup v-model="showNotice" :round="true">
        <div class="notice-content">
            <img @click="$router.push({path: 'notice/detail', query: {id: item.id}})" v-for = "item of noticeData" :key = "item.id" :src="item.cover" style="border-radius: 10px;">
        </div>
    </van-popup>
    <van-image-preview v-model:show="show" :images="images">
      <template v-slot:index>长按二维码保存图片</template>
    </van-image-preview>
  </div>
</template>

<script>
  import Vue from 'vue'
  import store from '@/store'
  import JmFooter from '../footer/footer'
  import { personFans } from "@/api/user";
  import { getAlertNotice } from "@/api/notice";
  import { getSwiperList } from "@/api/swiper";
  import { ImagePreview,Toast } from 'vant';
  import VueQr from 'vue-qr'
  import { TreeSelect,Swipe,SwipeItem,NoticeBar,ShareSheet,Popup } from 'vant'
  import { copy } from '@/utils/copy'
  import { wxShare } from "@/assets/js/wxshare";

  Vue.use(TreeSelect).use(Swipe).use(SwipeItem).use(NoticeBar).use(ShareSheet).use(Popup).use(ImagePreview)
  export default {
    name: 'person',
    components: {
        JmFooter,
        VueQr
    },
    data () {
      return {
        logoSrc: '',
        showNotice: false,
        noticeData:[],
        qrUrl: '',
        qrImg: '',
        showShare: false,
        options: [
          { name: '复制链接', icon: 'link' },
          { name: '二维码', icon: 'qrcode' },
        ],
        fansData: {
            all: 0,
            direct: 0
        },
        swiperList: [],
        myService: [
          {
            id: 1,
            tit:"充值",
            type: "chongzhi",
            icon: "\ue771",
            isShow: true
          },{
            id: 2,
            tit:"公告",
            type: "notice",
            icon:"\ue784",
            isShow: true
          },{
            id: 3,
            tit:"地址管理",
            type: "addr",
            icon:"\ue786",
            isShow: true
          },{
            id: 4,
            tit:"平台资料",
            type: "",
            icon:"\ue778",
            isShow: true
          },{
            id: 5,
            tit:"设置",
            type: "setting",
            icon:"\ue78e",
            isShow: true
          }
        ],
        images:[],
        show:false
      }
    },


    computed: {
        showSwiper () {
            return this.swiperList.length
        },
    },
    mounted() {

    },
    activated: async function () {
        await this.$store.dispatch('getUserInfo')
        if (this.$store.state.userInfo.password === '') {
            this.$router.push({path: 'password'})
        }
        this.getSwiperList();
        this.$refs.footer.activeChange(2)
        // this.myService.filter(res => {
        //     if (this.$store.state.userInfo.pid === 1 && res.id === 5) {
        //         res.isShow = false
        //     }
        // })
        this.qrUrl = window.location.origin + "/share?storeId=" + this.$store.state.userInfo.store_id + '&pid=' + this.$store.state.userInfo.id
        this.getpersonFans();
        this.getAlertNotice()
        this.logoSrc = this.$store.state.userInfo.avatar
        this.$refs.footer.getCar()
        this.share();
    },
    beforeRouteEnter(to, from, next) {

      //如果是ios环境
      if( /iPhone|mac|iPod|iPad/i.test(navigator.userAgent) ){
        // 记录进入app时的url
        if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {
          window.entryUrl = location.href.split('#')[0]
        }
        window.entryUrl =  /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : window.entryUrl;
      }
      else{
        window.entryUrl = window.location.origin + to.path
      }
    	var u = navigator.userAgent;
    	  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    	  // XXX: 修复iOS版微信HTML5 History兼容性问题
    	  if (isiOS && to.path !== location.pathname) {
    	    // 此处不可使用location.replace
          console.log("跳转新页面");
    	    location.assign(to.fullPath)
    	  } else {
    	    next()
    	  }
    },
    methods: {
       getAlertNotice() {
           getAlertNotice({}).then(res=>{
               if (res.code === 20000 && res.data.length!=0) {
                   this.showNotice = true
                   this.noticeData = res.data
               } else {
                   this.showNotice = false
                   this.noticeData = []
               }
           })
       },
       goBanner(url) {
         location.href = url
       },
       goGold() {
         this.$router.push({path: '/gold'})
       },
       goTxian(){
          this.$router.push({path: '/tixian'})
       },
       goJf() {
         this.$router.push({path: '/jf'})
       },
       goJgz() {
         this.$router.push({path: '/jgz'})
       },
       bdIndex() {
         this.$router.push({path: '/bdindex'})
       },
       getpersonFans() {
          const that = this
          personFans({}).then(res => {
            this.fansData = res.data;
          })
      },
      toFansDetail(){
        this.$router.push({path: '/fans/list'})
      },
      goOrder(status) {
        this.$router.push({ path: '/order', query: {status} })
      },
      service(type) {
          if(type == ''){
            return
          }
          if (type === 'share') {
              this.showShare = true
          } else{
            this.$router.push({ path: "/" + type })
          }
      },
      selectShare(e) {
          this.showShare = false
          if (e.icon === 'link') {
              copy(this.qrUrl)
              Toast.success({message: '复制成功', duration: 2000})
          } else {
              this.preview()
          }
      },
      getSwiperList(){
          getSwiperList({type:2}).then(res => {
            this.swiperList = res.data;
          })
      },
      preview() {
        this.show = true
        this.images =[this.qrImg]
          // ImagePreview([this.qrImg])
      },
      makeQr(e) {
        const that = this
        that.$nextTick(function() {
          that.qrImg = e
        })
      },
      share(){
        const that = this
        let userId = that.$store.state.userInfo.id
        let store_id = that.$store.state.userInfo.store_id

        let url = /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : window.entryUrl;
        let imgurl = 'https://meibaolianmeng.oss-cn-beijing.aliyuncs.com/good/1648906076.png?x-oss-process=image/interlace,1/format,jpg'
        wxShare(url,store_id,userId,imgurl)
      }
    }
  }
</script>

<style lang="stylus">
  .van-popup.van-popup--round.van-popup--center
    width: 75%
  .notice-content
    max-width: 100%;
    max-height: 300px;
    padding: 10px;
    img:first-child
      margin-top: 0
    img
      width: 100%;margin-top: 10px;
</style>
<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet
      width: .1rem
      height: .1rem
      background: #f68
      opacity: 0.2

  .person_content
    width: 100%
    background-image: linear-gradient(to right, #ee982e , #fe3434);
    padding-bottom: 1.4rem
    .person_header
      width: 100%
      padding: .6rem .3rem 1.4rem .3rem
      .header_info
        width: 80%
        display: flex
        overflow: hidden
        margin: auto
        .info_img
          width: 1.4rem
          height: 1.4rem
          overflow: hidden
          border-radius: 50%
          margin-right: .3rem
          img
            width: 100%
        .info_menu
          flex:1
          -webkit-flex:1
          overflow: hidden
          padding: .16rem 0px
          h2
            line-height: .52rem
            overflow: hidden
            .dj
              padding: 0 .2rem
              line-height .5rem
              border-radius: .52rem
              color: #f6d67e
              font-size: .25rem
              background #ae3628
              overflow hidden
              letter-spacing: 1px;
              span
                font-size .5rem
                float left
                color: rgb(237, 177, 79)

          .info_id
            color: #fccd63
            font-size: .3rem
            margin-top: .2rem

        .info_shezhi
          width: 1.4rem
          height: 1.4rem
          overflow hidden
          border-radius 4px
          img
            width 100%
            overflow hidden
    .person_midel
      width: 92%
      margin: .6rem auto
      border-radius: 4px
      border: 1px solid #eee
      background-image: linear-gradient(#f9e9e8, #f9e4c8);
      border: 1px solid #facbc5;
      text-align: center;
      .midel_top
        width: 10px;
        height: 10px;
        border: 1px solid #facbc5;
        position: relative;
        left: 48%;
        top: -6px;
        transform: rotate(45deg);
        border-right: 0px;
        border-bottom: 0px;
        background: #f9e9e8;
      .midel_title
        display: inline-block;
        padding: .1rem .05rem;
        border-radius: 5%;
        background: #e6e0db;
        border: 1px solid #f88f72;
      ul
        width: 100%
        overflow: hidden
        li
          width: 25%
          float: left
          position: relative
          p
            text-align: center
            font-size: .30rem
            color: #706e69
            line-height: 1.1
            span
                color: #ee922f;
                overflow: hidden;
                display: block;
                width: .8rem;
                height: .8rem;
                margin: .1rem auto;
                background: radial-gradient(circle,#fef5ec,#fff);
                border-radius: 50%;
                line-height: .8rem;
          .num
            text-align: center
            color: #616062
            margin-top: .15rem
      .midel_bottom
          background-image: linear-gradient(#fd3c32, #f37e10);
          border-radius: 10px;
          color: #f9faf9;
          position: relative;
          bottom: -.3rem;
          display: inline-block;
          padding: .2rem;

    .person_block
      width: 92%
      margin: .3rem auto
      border-radius: 4px
      background: #fff
      .person_block_title
        width: 100%
        overflow: hidden
        padding: .3rem
        border-bottom: 1px solid #f96d44
        font-size: .36rem
        color: #000
        font-weight 400
        span
          color: #4f4f4f
          font-size: .28rem
          padding-top: 4px
          font-weight normal
        .person_tel
          font-style: italic;
          color: #8f5957;
          margin-left : .2rem
      .person_block_ul
        width: 100%
        overflow: hidden
        padding: .3rem 0
        li
          width: 25%
          float: left
          text-align: center
          span
              color: #d2563a;
              font-size: 0.6rem;
              overflow: hidden;
              display: block;
              width: .6rem;
              height: .6rem;
              margin: 0 auto;

              // background: radial-gradient(circle, #f7dfdd, #fff);
          // img
          //   width: .64rem
          //   height: .64rem
          //   margin: 0 auto
          //   overflow: hidden
          p
            margin-top: .14rem
            font-size: .24rem
            color: #666
      .person_block_content
          display: flex;
          .person_share
            width: 38%;
            text-align: center;
            margin: auto;
            font-size: .4rem;
          .person_manage_ul
            width: 62%;
            overflow: hidden;
            li
                text-align: center;
                width: 47%;
                float: left;
                margin: .2rem 0;
                position: relative;
            .ul_li::after
                content: '';
                position: absolute;
                left: 0;
                top: .2rem;
                bottom: auto;
                right: auto;
                height: 55%;
                width: 1px;
                background-color: #c4c4c4;
              p
                width 100%
                text-align center
                line-height .5rem
                font-size .32rem
                color #000
                font-weight 600
              span
                display inline-block
                line-height .4rem
                font-size .26rem
                color #4f4f4f
              &:first-child
                flex none
                width 20%
                p
                  line-height .8rem
      .person_block_ul_wake
        width: 100%
        overflow: hidden
        padding: 0 0 .3rem 0
        li
          width: 33%
          float: left
          margin-top: .3rem
          text-align: center
          // img
          //   width: .64rem
          //   height: .64rem
          //   margin: 0 auto
          //   overflow: hidden
          span
              color: #d64532;
              font-size: .6rem;
              overflow: hidden;

          p
            margin-top: .2rem
            font-size: .3rem
            color: #333


    .person_block_swiper
        width: 92%
        margin: 0 auto .3rem auto
        border-radius: 4px
        .my-swipe
            border-radius: 30px;
            // border: 10px solid #c8ce23;
        .wrapper
            width: 100%
            height: 0
            overflow: hidden
            padding-bottom: 15%
            background: #fff
            .swiper-container
                overflow: initial
                .swiper-img
                    width: 100%

</style>
